<template>
	<el-dialog title="组件树" v-model="dialogVisible" width="70%">
		<el-tree :data="componentTreeModel" :draggable="true" :expand-on-click-node="false" :props="componentTreeProps"
			node-key="id" ref="treeComponent" @node-click="treeNodeClickHandler" @node-drop="onNodeDropHandler"></el-tree>
	</el-dialog>	
</template>

<script>
	import TreeMoveNodeCommand from './command/TreeMoveNodeCommand.js';
	import treeModelFactory from './TreeModelFactory.js';
	export default {
		name: "ComponentTreeDialog",
		data() {
			return {
				componentTreeProps: {
					children: 'children',
					label: 'name'
				},
				componentTreeModel:[],
				dialogVisible:false
			}
		},methods: {
			onNodeDropHandler() {
				var treeMoveNodeCommand = new TreeMoveNodeCommand();
				treeMoveNodeCommand.execute();
			},setVisible(visible){
				this.dialogVisible=visible;
				if(visible){
					var componentModel=this.$store.state.formDesigner.componentModel;
					var componentTreeModel={
						id:componentModel.id,
						name:componentModel["propertyMap"]["title"]
					};
					this.generateComponentTreeModel(componentModel,componentTreeModel);
					this.componentTreeModel=[componentTreeModel];
				}
			},generateComponentTreeModel(componentModel,componentTreeModel){
				var children=componentModel.children;
				if(children!=undefined){
					if(componentTreeModel.children==undefined){
						componentTreeModel.children=[];
					}
					for(var i=0;i<children.length;i++){
						var childComponentModel=children[i];
						var childComponentTreeModel=treeModelFactory.createModel(childComponentModel);
						componentTreeModel.children.push(childComponentTreeModel);
					}
					for(i=0;i<children.length;i++){
						childComponentModel=children[i];
						childComponentTreeModel=componentTreeModel.children[i];
						this.generateComponentTreeModel(childComponentModel,childComponentTreeModel);
					}
				}
			},treeNodeClickHandler(data) {
				var children=this.$store.state.formDesigner.$refs.componentDesignerContent.children;
				for(var i=0;i<children.length;i++){
					if(children[i].componentModel.id==data.id){
						if (this.$store.state.formDesigner.getSelectedDesignComponent() != null) {
							this.$store.state.formDesigner.getSelectedDesignComponent().setSelected(false);
						}
						this.$store.state.formDesigner.setSelectedDesignComponent(children[i]);
						children[i].setSelected(true);
						this.$store.state.formDesigner.getPropertyTable().setSelectedComponent(children[i]);
						break;
					}
				}
			}
		},
	}	
</script>

<style>
</style>
